<template>
    <div>
        <div class="detail">
            <div class="pic1">
                <img :src="proMessage.pic1"/>
            </div>
            <div class="rightBox">
                <span class="productName">{{proMessage.name}}</span>
                <span class="price">￥{{proMessage.price}}</span>
                <hr>
                <dl class="productColor">
                    <dt>商品颜色</dt>
                    <dd v-for="(color,index) of proMessage.col" :key="index" :class="{active:col==index}" @click="col=index,changeCol($event)">
                        {{color}}
                    </dd>
                </dl>
                <dl class="productType">
                    <dt>商品类型</dt>
                    <dd v-for="(type,index) of proMessage.style" :key="index" :class="{active:style==index}" @click="style=index,changeStyle($event)">
                        {{type}}
                    </dd>
                </dl>
                <span class="count">选购数量</span>
                <div class="changes">
                    <div class="changecount">
                        <i class="dec" @click="decrement">-</i>
                        <input type="number" v-model="$store.state.product.count">
                        <i class="inc" @click="increment">+</i>
                    </div>
                    <span>件</span>
                </div>
                <div class="btns">
                    <button class="buy" @click="intocart($event)">立即购买</button>
                    <button class="intoCart" @click="intocart($event)">
                        加入购物车
                    </button>
                    <b-modal ref="myModalRef" hide-footer title="登录提醒" id="confirm">
                        <div class="d-block text-center">
                            <h3 class="tips">您好像还没有登录哦</h3>
                        </div>
                        <b-btn class="mt-3 loginBtn" variant="outline-danger" block @click="hideModal">去登录</b-btn>
                    </b-modal>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div class="productContent">
                <span class="contentTitle">宅寂设计</span>
                <pre class="content">双人床的床背取用了“梳背”为结构，由二十根纺锤型直棂组成，悉心打磨而成，
严格控制其间距，以使床背和床身间每一处的精准契合。
两端微微向床身呈半包围状，连接处以榫柔和相接。床背设计为略微倾斜的角度，贴合背部，可舒适依靠。
床身尺度低矮宽大，厚实的黑胡桃木使整体更为稳定，
床身内的骨架使用了木性稳定的樱桃木，并比精细牢固的燕尾榫结构与床身相连接，增强了床身的承重力。
床垫可嵌入床身下沉的凹槽中，使用时不易倾斜。</pre>
            </div>
            <img :src="productDetail.pic2" class="contentPic1"/>
            <div class="productContent">
                <span class="contentTitle">宅寂设计</span>
                 <pre class="content">床头板选择超优实木直拼板，排骨档选用白蜡木。
床架采用定制碳素结构钢制成，保证了床体稳定性，表面喷漆为棕灰色，同时兼顾了美感。
方管壁厚1.5mm，角码厚度更是达到了普通角码的2倍，每个部件都保证牢固耐用。</pre>
            </div>
            <div class="midPic">
                <img :src="productDetail.pic3">
                <img :src="productDetail.pic4">
                <img :src="productDetail.pic5">
            </div>
            <span class="bottomTitle">搭配展示</span>
            <div class="bottomPic">
                <img :src="productDetail.pic6">
                <img :src="productDetail.pic7">
                <img :src="productDetail.pic8">
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations,mapGetters} from 'vuex'
export default {
    data(){
        return {
            col:0,
            style:0,
            productDetail:{
                "pic2": require("@/details/test2.png"),
                "pic3": require("@/details/test3.png"),
                "pic4": require("@/details/test4.png"),
                "pic5": require("@/details/test5.png"),
                "pic6": require("@/details/test6.png"),
                "pic7": require("@/details/test7.png"),
                "pic8": require("@/details/test8.png"),
            },
            proMessage:{},
            color:'',
            type:'',
            selectProduct:{
                count:1,
                uid:'',
                cid:'',
            },
        }
    },
    beforeMount(){
        var id=this.$route.query.id
        this.selectProduct.cid=id

        this.axios({
            url:`${this.$config.dataUrl}/details/getPro/?id=${id}`,
            method:'get',
            data:{
                id:id
            }
        }).then(res=>{
            var item=res.data.data[0]
            this.proMessage=item
            this.selectProduct.color=item.col[0]
            this.selectProduct.style=item.style[0]
            this.selectProduct.cid=item.id
        })
        this.$store.commit('resetCount',1)
    },
    methods:{
        changeCol(event){
            this.color=event.target.innerHTML
        },
        changeStyle(event){
            this.type=event.target.innerHTML
        },
        intocart(e){
            if(this.$store.state.uid!=='-1'){
                this.axios({
                    url:`${this.$config.dataUrl}/details/intoCart?uid=${this.selectProduct.uid}&cid=${this.selectProduct.cid}&count=${this.$store.state.product.count}`,
                    method:'post',
                    data:this.selectProduct
                }).then(res=>{
                    if(e.target.innerHTML==document.querySelector('.buy').innerHTML){
                        this.$router.push("/cart");
                    }
                    this.$store.dispatch('increase',this.selectProduct.count);
                    this.$store.commit('resetCount',1)
                })

            }else{
                this.$refs.myModalRef.show()
            }
        },
        hideModal () {
            this.$refs.myModalRef.hide()
            this.$router.push('/login')
        },
        ...mapMutations(['increment','decrement'])
    },
    computed: {
        count(){
            return this.$store.state.product.count
        }
    },
    watch: {
        count:{
            handler(newValue, oldValue) {
                this.selectProduct.count=newValue;
                if(newValue<=1){
                    this.$store.state.product.count=1
                }
                else if(newValue>=99){
                    this.$store.state.product.count=99
                }
        　　},
        　　immediate: true
        },
        uid:{
            handler(newValue, oldValue) {
                this.selectProduct.uid=this.$store.state.uid
        　　},
        　　immediate: true
        }
    },
}
</script>



<style lang="scss" scoped deep>
    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin imgStyle($w,$h){
        width : #{$w};
        height: #{$h};
        img{
            width  : 100%;
            height : 100%;
            display: block;
        }
    }
    @mixin wrapperStyle{
        width   : 12rem;
        margin  : 0 auto;
        position: relative;
        font-size: 0.16rem;
        @include clearfix();
         a{
            color: #666
        }
    }
    @mixin productStyle{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.2rem;
        dt{
            font-size:0.18rem;
            line-height: 0.28rem;
            height: 0.28rem;
            font-weight:400;
            width: 100%
        }
        dd{
            width:1rem;
            height:0.3rem;
            line-height: 0.3rem;
            border:1px solid rgba(181,181,181,1);
            font-size:0.14rem;
            font-weight:400;
            text-align: center;
            margin-right: 0.1rem;
            margin-bottom:0;
            box-sizing: border-box;
            cursor: pointer;
            color: #B5B5B5;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .active{
            color: rgba(67,67,67,1);
            border:1px solid rgba(67,67,67,1);
        }
    }
    @mixin fontStyle($i){
        font-size:#{$i}rem;
        font-weight:400;
        display: block;
        width: 100%;
        height: 0.44rem;
        line-height: 0.44rem;
    }
    .wrapper{
        @include wrapperStyle();
        position: relative;
        margin-top: 0.5rem;
        font-family:MicrosoftYaHei;
        .productContent{
            .contentTitle{
                color: #8F7B60;
                @include fontStyle(0.16)
            }
            .content{
                font-size: 0.14rem;
                line-height: 0.28rem;
                margin-bottom: 0.54rem
            }
        }
        .contentPic1{
            width: 100%;
        }
        .midPic{
            display: flex;
            justify-content:space-between;
            margin-bottom: 0.49rem;
            img{
                width: 4rem;
                height: 4rem;
            }
        }
        .bottomTitle{
            display: block;
            width: 100%;
            text-align: center;
            font-size:0.28rem;
            font-weight:400;
            color:rgba(143,123,96,1);
            line-height:0.28rem;
            margin-bottom: 0.29rem;
        }
        .bottomPic{
            margin-bottom: 0.87rem;
            img{
                width: 100%;
                margin-bottom: 0.19rem;
            }
        }
    }
    .detail{
        width: 100%;
        padding-top: 1.26rem;
        display: flex;
        font-family:MicrosoftYaHei;
        .pic1{
            @include imgStyle(11.91rem,6rem)
        }
        .rightBox{
            margin-left: 0.29rem;
            padding-top: 1rem;
            .productName{
                @include fontStyle(0.24)
            }
            .price{
                @include fontStyle(0.18)
            }
            hr{
                margin: 0;
                border-top:1px solid rgba(67,67,67,1);
                width: 3.6rem;
                margin:0.1rem 0;
            }
            .productColor{
                @include productStyle();
            }
            .productType{
                @include productStyle();
            }
            .count{
                @include fontStyle(0.18)
            }
            .changes{
                font-size: 0.16rem;
                display: flex;
                height: 0.23rem;
                line-height: 0.23rem;
                margin-bottom: 0.6rem;
            }
            .changecount{
                display: flex;
                position: relative;
                margin-right: 0.1rem;
                input{
                    width:0.73rem;
                    height:0.20rem;
                    padding: 0.1rem 0;
                    border:1px solid rgba(67,67,67,1);
                    font-size: 0.14rem;
                    text-align: center;
                    &::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                    }
                }
                i{
                    font-size: 0.16rem;
                    position: absolute;
                    height: 0.2rem;
                    width: 0.2rem;
                    line-height: 0.2rem;
                    top: 1px;
                    cursor: pointer;
                    font-style: normal;
                    text-align: center;
                    -webkit-user-select:none;
                    -moz-user-select:none;
                    -ms-user-select:none;
                    user-select:none;
                }
                .dec{
                    left: 0;
                    border-right: 1px solid rgba(67,67,67,1);
                }
                .inc{
                    right: 0;
                    border-left: 1px solid rgba(67,67,67,1);
                }
            }
            .btns{
                display: flex;
                button{
                    cursor: pointer;
                    -webkit-user-select:none;
                    -moz-user-select:none;
                    -ms-user-select:none;
                    user-select:none;
                }
                .buy{
                    width: 1.3rem;
                    height: 0.35rem;
                    font-size: 0.16rem;
                    border:1px solid rgba(67,67,67,1);
                    background-color: #fff;
                    margin-right: 0.09rem;
                }
                .intoCart{
                    width:1.84rem;
                    height:0.35rem;
                    font-size: 0.16rem;
                    background:rgba(143,123,96,1);
                    border:1px solid rgba(143,123,96,1);
                    color: #fff;
                }
            }
            #confirm{
                .tips{
                    font-size: 0.24rem
                }
                .loginBtn{
                    font-size: 0.24rem
                }
            }
        }
    }
</style>
<style>
.modal-title{
    font-size: 0.3rem
}
.modal-header{
    padding: 0.1rem;
    padding-left: 0.2rem;
}
.modal-header .close{
    padding: 0;
    margin: 0;
}
.close{
    font-size: 0.5rem
}
.modal-body{
    padding: 0.4rem;
}
.btn{
    font-size: 0.24rem;
    padding: 0.1rem 0.2rem;
}
.modal-footer{
    padding: 0.2rem;
}
</style>